<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<!-- template with mvvm  -->
<style type="text/css">
    #wp_body #body_layout .item{float:left; position: relative;overflow: hidden;}
</style>

<div id="body_layout">
    <div class="item" id="iwanto" style="background-color: #35bdd9"></div>
    <div class="item" id="smartsteam"></div>
    <div class="item" id="contacts" style="background-color: #87CB65"></div>
    <div class="item" id="apptools" style="background-color: #39bf71"></div>
    <div class="item" id="communities" style="background-color: #ECB244"></div>
    <div id="documents" class="item" style="background-color: #E6E6E6"></div>
    <div id="inbox" class="item" style="background-color: #006DA5"></div>
    <!--<div class="item" id="calendar" style="background-color: #006A80">
        <img src="imgs/2.png" alt="">
    </div>-->
    <div id="boxes" class="item" style="background-color: #f2f2f2"></div>
</div>
<!-- view model -->

<!-- action or event -->
<script type="text/javascript">

//    $(function(){$.ajaxSetup({crossDomain:true});$.getScript("js/homepage.js");});
WP_BODY = $('#wp_body');
var wp_main = $("#body_layout"),
        sps = $(".item"),
        header = $('#wp_header');
window.onresize = function(){
    Screen.width =  $(window).width();
    Screen.height = $(window).height();
    Screen.bodyHeight = Screen.height-60;
    wp_main.height(Screen.bodyHeight);
    WP_BODY.width(Screen.width);
    render();
    //notification win reset position
    if (WP_USER_ID != 1) {
        if (window.notificationWinFunc) {
            notificationWinFunc.setPosition();
        }
    }
}
$(window).resize();

function render(){
    $('.item').each(function(i){
        $(this).css({height: Screen.bodyHeight});
    });
}

function homepage_resize(w,i){
    $('.item:eq('+i+')').css({width:w,height: Screen.bodyHeight});
}

$(function (){
    $('.item').each(function(i){
        $(this).css({width:256 ,height: Screen.bodyHeight});
    });
})

var iszoomout = false, maxwidth = 256, duration = 300, curstyle = '',curstyle = '';
var HomePage_Scrollable = (function() {
    var objs, obj, width, w, first, zoomtarget = -1,iszoom = false;
    var zoomCallbaksArray = new Array();
    $.fx.speeds._default = 0;
    function start(e) {
        if($(e.target).is('input')) return;
        obj = this;
        e = fix(e);
        obj.lastMouseX	= e.pageX;
        if (zoomtarget == -1) {
            document.onmousemove = drag;
            document.onmouseup = end;

            document.addEventListener('touchmove', drag);
            document.addEventListener('touchend', end);
        } else {
            document.onmousemove = null;
            document.onmouseup = null;
            document.removeEventListener('touchmove',drag);
            document.removeEventListener('touchend',end);
            obj = null;
        }
        return false;
    }
    function zoomIn(index) {
        if(iszoom) {
            reset();
        };
        iszoom = true;
        zoomtarget = index;
        first[0] = objs[index];
        // first.width(3 * w);
        width += 2 * w;

        obj = objs[index];
//        var btn_color = $('.btn-zoom',obj).data('color') ? '-w' : '';
//        $('.btn-zoom',obj).removeClass("zoom-in"+btn_color).addClass('zoom-out'+btn_color);
        curstyle =  $(obj).attr('style');
        $(obj).transition({rotateY:'0deg'},0);
//        $(obj).find('.innerImg-before').animate({opacity:0 }, duration);
        $(obj).animate({width:3 * w },duration);
        _move(-1);
        // _move(Math.abs(parseInt(objs[index].style.left)));
        var dx;
        // var dx = ($(window).width() - 3 * w ) / 2 - (parseInt(objs[index].style.left) + w * index);
        if(Math.abs( parseInt(objs[index].style.left) ) > w * index){
            dx = -parseInt(objs[index].style.left) - w * index;
        } else {
            dx = ($(window).width() - 3 * w ) / 2 - (parseInt(objs[index].style.left) + w * index);
        }
        _move(dx);
        obj = null;

        switch(zoomtarget){
            case 3:
                break;
        }
        wp_main.width((sps.width() + 0) * sps.length + 256 * 2);
        zoomCallbaksArray[index].ZoomInCallback();
    }
    function zoomOut(index) {
        iszoom = false;
        zoomtarget = -1;
        first[0] = objs[index];
        // first.width(w);
        width -= 2 * w;
        obj = objs[index];
//        $(obj).find('.innerImg-before').animate({opacity:1 }, duration);
        $(obj).animate({width:w },duration,function(){
            $(obj).attr('style',curstyle);
        });
//        var btn_color = $('.btn-zoom',obj).data('color') ? '-w' : '';
//        $('.btn-zoom',obj).removeClass("zoom-out"+btn_color).addClass('zoom-in'+btn_color);
        _move(-1);
        _move(1);
        obj = null;
        switch(zoomtarget){
            case 3:
                $('#s3').find('.innerImg-middle, #blockmode, #listmode').hide();
                break;
        }
        wp_main.width((sps.width() + 0) * sps.length);
        zoomCallbaksArray[index].ZoomOutCallback();
    }
    function _move(dx) {
        if (dx != 0) {
            var nx, nxu, i, f, l, af, al;
            if (obj) {
                nx = parseInt(obj.style.left) + dx;
            } else {
                nx = dx;
            }
            //right edge
//            if (parseInt(obj.style.left) + width < $(window).width()) {
//                obj.style.left = $(window).width() - width;
//                for (i = 0; i < objs.length; i++) {
//                    objs[i].style.left = ($(window).width() - width) + "px";
//                }
//            }
            //fix the nx
            if (dx > 0 && nx > 0) {
                nx = 0;
            } else if (dx < 0 && $(window).width() - nx > width) {
                nx = $(window).width() - width;
            }
            nxu = nx + 'px';
            f = Math.floor(Math.abs(nx) / w);
            l = Math.floor(($(window).width() - (w - (Math.abs(nx) % w))) / w) + 1 + f;
            if (zoomtarget >= 0)
                l -= 2;
            af = Math.acos(1 - (Math.abs(nx) % w) / w) * 180 / Math.PI;
            al = Math.acos((($(window).width() - (w - (Math.abs(nx) % w))) % w) / w) * 180 / Math.PI;
            if (dx > 0) {
                if (nx <= 0) {
                    for (i = 0; i < objs.length; i++) {
                        first[0] = objs[i];
                        if (i == f) {
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-' + af + 'deg'});
                        } else if (i == l) {
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:al + 'deg'});
                        } else if (i > f && i < l) {
                            first.transition({rotateY: '0deg'});
                        }else {
                            first.transition({rotateY: '90deg'});
                        }
                        objs[i].style.left = nxu;
                    }
                }
            } else if (dx < 0) {
                if ($(window).width() - nx <= width) {
                    for (i = 0; i < objs.length; i++) {
                        first[0] = objs[i];
                        if (i == f) {
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-' + af + 'deg'});
                        } else if (i == l) {
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:al + 'deg'});
                        } else if (i < f) {
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-90deg'});
                        } else if (i < l) {
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:'0deg'});
                        } else {
                            first.transition({rotateY: '-90deg'});
                        }
                        objs[i].style.left = nxu;
                    }
                } else{

                }
            }
        }
    }
    function reset(){
        width -= 2 * w;
        obj = objs[zoomtarget];
        zoomCallbaksArray[zoomtarget].ZoomOutCallback();
//        $(obj).find('.innerImg-before').css({opacity:1 });
        $(obj).width(w).attr('style',curstyle);
        $(obj).css({height: Screen.bodyHeight});
        var btn_color = $('.btn-zoom',obj).data('color') ? '-w' : '';
//        $('.btn-zoom',obj).removeClass("zoom-out"+btn_color).addClass('zoom-in'+btn_color);
        zoomtarget = -1;
        _move(-1);
        _move(1);
        iszoom = false;
    }
    function drag(e) {
        e = fix(e);
        var ex = e.pageX,
                dx, nx, nxu, i, f, l, af, al;
        dx = ex - obj.lastMouseX;
        if (dx > 5 || dx < -5) {
//        if (dx != 0) {
            if(iszoom) {
                reset();
            }
            nx = parseInt(obj.style.left) + dx;
            //fix the nx
            if (dx > 0 && nx > 0) {
                nx = 0;
            } else if (dx < 0 && $(window).width() - nx > width) {
                nx = $(window).width() - width;
            }
            nxu = nx + 'px';
            f = Math.floor(Math.abs(nx) / w);
            l = Math.floor(($(window).width() - (w - (Math.abs(nx) % w))) / w) + 1 + f;
            af = Math.acos(1 - (Math.abs(nx) % w) / w) * 180 / Math.PI;
            al = Math.acos((($(window).width() - (w - (Math.abs(nx) % w))) % w) / w) * 180 / Math.PI;
            if (dx > 0) {
                if (true) {//nx <= 0) {
                    for (i = 0; i < objs.length; i++) {
                        first[0] = objs[i];
                        if (i == f) {
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-' + af + 'deg'});
                        } else if (i == l) {
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:al + 'deg'});
                        } else if (i > f && i < l) {
                            first.transition({rotateY: '0deg'});
                        } else {
                            first.transition({rotateY: '90deg'});
                        }
                        objs[i].style.left = nxu;
                    }
                }
            } else if (dx < 0) {
                if (true) {//$(window).width() - nx <= width) {
                    for (i = 0; i < objs.length; i++) {
                        first[0] = objs[i];
                        if (i == f) {
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-' + af + 'deg'});
                        } else if (i == l) {
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:al + 'deg'});
                        } else if (i < f) {
                            first.css('transformOrigin', '100% 50% 0px');
                            first.transition({rotateY:'-90deg'});
                        } else if (i < l) {
                            first.css('transformOrigin', '0% 50% 0px');
                            first.transition({rotateY:'0deg'});
                        } else {
                            first.transition({rotateY: '90deg'});
                        }
                        objs[i].style.left = nxu;
                    }
                }
            }
            obj.lastMouseX = ex;
        }
        return false;
    }
    function end() {
        document.onmousemove = null;
        document.onmouseup   = null;
        obj = null;
    }
    function fix(e) {
        e = e || window.event;
        e.which = e.which || e.button;
        e.pageX = e.pageX || e.x;
        return e;
    }
    return {
        scroll: function(selector, container) {
            objs = $(selector, container);
            width = container.width();
            w = objs.width();
            first = $(selector + ':first', container);

            var m = Math.floor(($(window).width() / w)),
                    a = Math.acos(($(window).width() % w) / w) * 180 / Math.PI;
            objs.css('perspective', '4000px');
            first[0] = objs[m];
            first.css('transformOrigin', '0% 50% 0px');
            first.transition({rotateY:a + 'deg'});
            for (var i = 0; i < objs.length; i++) {
                objs[i].onmousedown = start;
                objs[i].addEventListener('touchstart', start);
                if (isNaN(parseInt(objs[i].style.left)))
                    objs[i].style.left = "0px";
                if (i > m) {
                    first[0] = objs[i];
                    first.css('transformOrigin', '0% 50% 0px');
                    first.transition({rotateY:'90deg'});
                }
            }
        },
        zoom: function(index) {
            if (zoomtarget == index) {
                zoomOut(index);
            } else {
                zoomIn(index);
            }
        },
        registerZoomCallback: function (index, zoominCB, zoomoutCB) {
            var newElement = {
                ZoomInCallback : zoominCB,
                ZoomOutCallback : zoomoutCB
            };
            zoomCallbaksArray[index] = newElement;
        },
        moveToPosition: function(dx) {
            if (zoomtarget != -1) {
                reset();
            }
            _move(-dx);
        }
    };
})();

//wp_main.height(win.height() - header.height());
//wp_main.width(sps.width() * sps.length);

//win.resize(function(){
//    wp_main.height(win.height() - header.height());
//});

//because of the border-right is 1px. so width pluss 1 for each item.
wp_main.width((sps.width() + 0) * sps.length);
HomePage_Scrollable.scroll(".item", wp_main);

//function homepage_resize_2(){
//    var sw = $(window).width(), sh = $(window).height(),vw = sh * 1.6;
//}
//$(window).resize();
//$(window).resize(homepage_resize_2);
</script>